<template>
    <div>
        <div class="tabs">
            <ul>
                <li
                    v-for="(item, index) in data"
                    :key="item.idx"
                    :class="[tabIdx == item.idx ? 'active' : '']"
                    @click="handleTables(item)"
                >
                    <div>
                        <el-image :src="item.url" fit="fill"></el-image>

                        {{ item.name }}
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        data: {
            type: Array,
            default: () => [],
        },
        idx: {
            type: Number,
            default: 0,
        },
    },
    name: "tabs",
    data() {
        return {
            tabIdx: this.idx,
        };
    },
    created() {},
    mounted() {},
    methods: {
        handleTables(e) {
            this.tabIdx = e.idx;
            this.$emit("changeTabs", e);
            console.log(this.tabIdx);
        },
    },
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.tabs {
    ul {
        // border: 1px #409ac5 solid;
        border-radius: 10px;
        display: flex;
        flex-flow: row wrap;
        li:first-child {
            border-radius: 8px 0px 0px 8px;
            // border-right: 0px;
        }
        li:last-child {
            border-radius: 0px 8px 8px 0px;
            // border-right: 1px #409ac5 solid;
        }
        li {
            padding: 5px;
            flex-shrink: 0;
            border: 1px #409ac5 solid;
            // border-right: 0px;
            cursor: pointer;
            // width: 70px;
            div {
                display: flex;
                gap: 5px;
                justify-content: center;
                align-items: center;
                .el-image {
                    height: 20px;
                    height: 20px;
                }
            }
            &.active {
                background-color: #54778a;
                color: #fff;
            }
        }
    }
}
</style>
